<template>
	<picker :value="value" mode="multiSelector" :range="range" range-key="name" @change="change"
		@columnchange='columnchange'>
		<fui-form-item label="产品类型" asterisk arrow highlight>
			<view v-if="value.length===0" class="fs-color__label">请选择产品类型</view>
			<view v-else>{{label}}</view>
		</fui-form-item>
	</picker>
</template>

<script setup>
	import { onMounted, ref, watch } from 'vue';
	import { fetchProductType, fetchProductSubType } from '@/common/api/index.js'

	const product_type = defineModel('product_type')
	const product_subdivision = defineModel('product_subdivision')

	const range = ref([
		[],
		[]
	])
	const value = ref([])

	async function getProductType() {
		let { success, data } = await fetchProductType()
		if (success) {
			data = Array.isArray(data) ? data : [];
			data.forEach(em => em.children = [])
			range.value.splice(0, 1, data)
			if (data.length > 0) {
				await getProductSubType(data[0].id, 0)
			}
		}
	}

	async function getProductSubType(id, value) {
		const { success, data } = await fetchProductSubType(id)
		if (success) {
			range.value.splice(1, 1, Array.isArray(data) ? data : [])
			if (value !== undefined) {
				range.value[0][value].children = Array.isArray(data) ? data : []
			}
		}
	}

	const columnchange = async ({ detail: { column, value } }) => {
		if (column === 0) {
			range.value.splice(1, 1, [])
			const obj = range.value[0][value]
			if (obj.children.length === 0) {
				const id = range.value[0][value].id
				await getProductSubType(id, value)
			} else {
				const arr = range.value[0][value].children
				range.value.splice(1, 1, arr)
			}
		}
	}

	const change = (e) => {
		value.value = e.detail.value
	}

	const label = ref('')
	watch(value, (val) => {
		if (val.length === 2) {
			if (range.value[1].length > 0) {
				const productTypeLabel = range.value[0][val[0]].name
				const productType = range.value[0][val[0]].id
				const productSubdivisionLabel = range.value[1][val[1]].name
				const productSubdivision = range.value[1][val[1]].id
				label.value = `${productTypeLabel}--${productSubdivisionLabel}`
				product_type.value = productType
				product_subdivision.value = productSubdivision
			} else {
				uni.$fui.toast('数据不完整，请联系管理员')
				label.value = ''
				product_type.value = ''
				product_subdivision.value = ''
			}
		}

	}, { immediate: true })

	onMounted(async () => {
		await getProductType()
		// 编辑 回显选择
		if (product_type.value && product_subdivision.value) {
			if (range.value[0].length > 0) {
				const val1Index = range.value[0].findIndex((em) => em.id === product_type.value);
				if (val1Index !== -1 && range.value[0][val1Index]
					.children.length === 0) {
					await getProductSubType(product_type.value, val1Index);
				}
				if (range.value[1].length > 0) {
					const val2Index = range.value[1].findIndex((em) => em.id === product_subdivision.value);
					if (val2Index !== -1) {
						value.value = [val1Index, val2Index];
					} else {
						const arr = range.value[0].children
						range.value.splice(1, 1, arr);
					}
				}
			}
		}
	})
</script>

<style>
</style>